<template>
  <el-menu
    class="sidebar"
    :collapse="isCollapse"
    :default-active="activeIndex"
    background-color="#2b4a6f"
    text-color="#fff" 
    active-text-color="#ffd04b"
    @select="handleSelect"
  >
    <div class="logo-container">
      <el-image class="logo-img" :src="logoUrl" fit="contain" />
      <el-button
        class="collapse-btn"
        :icon="isCollapse ? Expand : Fold"
        circle
        plain
        size="small"
        @click="toggleCollapse"
      />
    </div>

    <el-menu-item v-for="item in menu" :key="item.text" :index="item.text">
      <el-tooltip
        :content="item.text"
        placement="right"
        :disabled="!isCollapse"
        effect="light"
        :visible="!isCollapse"
      >
        <div class="menu-item-content">
          <el-image class="menu-icon" :src="item.icon" fit="contain" @error="handleImageError" />
          <span>{{ item.text }}</span>
        </div>
      </el-tooltip>
    </el-menu-item>
  </el-menu>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Expand, Fold } from '@element-plus/icons-vue'

const router = useRouter()
const isCollapse = ref(false)
const activeIndex = ref('')
const logoUrl = new URL('../assets/topview_logo.png', import.meta.url).href

const menu = [
  {
    icon: new URL('../assets/auto.png', import.meta.url).href,
    hoverIcon: new URL('../assets/auto_hover.png', import.meta.url).href,
    text: '自动模式'
  },
  {
    icon: new URL('../assets/manual.png', import.meta.url).href,
    hoverIcon: new URL('../assets/manual_hover.png', import.meta.url).href,
    text: '手动模式'
  },
  {
    icon: new URL('../assets/standard.png', import.meta.url).href,
    hoverIcon: new URL('../assets/standard_hover.png', import.meta.url).href,
    text: '标准模式'
  },
  {
    icon: new URL('../assets/query.png', import.meta.url).href,
    hoverIcon: new URL('../assets/query_hover.png', import.meta.url).href,
    text: '系统查询'
  },
  {
    icon: new URL('../assets/view.png', import.meta.url).href,
    hoverIcon: new URL('../assets/view_hover.png', import.meta.url).href,
    text: '系统俯视'
  }
]

const handleSelect = (index: string): void => {
  activeIndex.value = index
  if (index === '手动模式') {
    router.push('/manual/卷帘门/comm')
  } else if (index === '自动模式') {
    router.push('/')
  } else if (index === '标准模式') {
    router.push('/standard')
  } 
}
const handleImageError = (e: Event): void => {
  console.error('图片加载失败:', (e.target as HTMLImageElement).src)
}

const toggleCollapse = (): void => {
  isCollapse.value = !isCollapse.value
}
</script>

<style scoped>
.sidebar {
  height: 100vh;
  border: none;
}

.sidebar:not(.el-menu--collapse) {
  width: 200px;
}

.logo-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-img {
  width: 32px;
  height: 32px;
}

.collapse-btn {
  border: none;
  color: #fff;
  background: transparent;
}

.collapse-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.menu-item-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 5px 0;
}

.menu-icon {
  width: 64px;
  height: 64px;
  transition: all 0.3s;
}

:deep(.el-menu-item:hover) .menu-icon {
  content: var(--hover-icon);
  src: var(--hover-icon);
}

:deep(.el-menu-item) {
  display: flex;
  align-items: center;
  height: 150px;
}

:deep(.el-menu-item.is-active) {
  background-color: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 0 10px rgba(255, 208, 75, 0.3);
}

:deep(.el-menu-item:hover) {
  background-color: rgba(255, 255, 255, 0.1);
  transform: scale(1.02);
  transition: all 0.3s ease;
}

:deep(.el-menu-item span) {
  font-size: 14px;
}
</style>
